<template>
    <div class="page-box">
        <Page :total="total" :current="curPageNum" :page-size="pageSize" @on-change="changePage"/>
    </div>
</template>

<script>
  import { Page } from 'view-design'

  export default {
    name: 'm-page',
    components: {
      Page
    },
    props: {
      total: {
        type: Number
      },
      curPageNum: {
        type: Number
      },
      pageSize: {
        type: Number
      }
    },
    methods: {
      changePage (pageNum) {
        this.$emit('changePage', pageNum)
      }
    }
  }
</script>

<style lang="less">
    .page-box {
        text-align: center;
        margin-bottom: 30px;

        .ivu-page {

            .ivu-page-prev, .ivu-page-next {
                display: inline-block;
                vertical-align: middle;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                height: 25px;
                width: 25px;
                min-width: 25px;
                min-height: 25px;
                line-height: 25px;
                list-style: none;
                text-align: center;
                cursor: pointer;
                color: var(--font-base-color);
                border: 1px solid var(--select-dropdown-hover-background-color);
                border-radius: 0;
                background: var(--select-dropdown-background-color);
                transition: 0s;

                a {
                    color: var(--font-base-color);
                }
            }

            .ivu-page-item {
                display: inline-block;
                vertical-align: middle;
                height: 25px;
                min-width: 25px;
                min-height: 25px;
                line-height: 25px;
                margin-right: 4px;
                text-align: center;
                list-style: none;
                background-color: transparent;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                cursor: pointer;
                font-weight: 500;
                border: 1px solid transparent;
                border-radius: 0;
                transition: 0s;
                padding: 0 5px;

                a {
                    color: var(--font-base-color);
                    margin: 0;
                }
            }

            .ivu-page-item-active {
                font-weight: 600;

                a {
                    color: var(--font-active-color);
                }
            }

            .ivu-page-item:hover {
                border: 1px solid var(--select-dropdown-hover-background-color);
                background: var(--select-dropdown-hover-background-color);
                font-weight: 600;

                a {
                    color: var(--font-active-color);
                    margin: 0;
                }
            }

            .ivu-page-item-active:hover {
                cursor: default;
                background: none;
                border: 1px solid transparent;

                a {
                    cursor: default;
                    color: var(--font-active-color);
                }
            }

            .ivu-page-prev:hover, .ivu-page-next:hover {
                border: 1px solid var(--select-dropdown-hover-background-color);
                background: var(--select-dropdown-hover-background-color);

                a {
                    color: var(--font-active-color);
                }
            }

            .ivu-page-item-jump-next, .ivu-page-item-jump-prev {
                color: var(--font-base-color);
                display: inline-block;
                vertical-align: middle;
                width: 25px;
                height: 25px;
                min-width: 25px;
                min-height: 25px;
                line-height: 25px;
                margin-right: 4px;
                text-align: center;
                list-style: none;
                background-color: transparent;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                cursor: pointer;
                font-weight: 500;
                border: 1px solid transparent;
                border-radius: 0;
                transition: 0s;
                padding: 0 5px;

                a {
                    color: var(--font-base-color);
                }
            }

            .ivu-page-item-jump-next:hover, .ivu-page-item-jump-prev:hover {
                font-weight: 600;

                a {
                    color: var(--font-active-color);
                    margin: 0;
                }
            }

            .ivu-page-item-jump-next:after, .ivu-page-item-jump-prev:after {
                color: var(--font-base-color);
            }

            .ivu-page-disabled {
                cursor: default;

                a {
                    cursor: default;
                    color: var(--font-tow-color);
                }
            }

            .ivu-page-disabled:hover {
                border: 1px solid var(--select-dropdown-hover-background-color);
                background: var(--select-dropdown-background-color);

                a {
                    color: var(--font-tow-color);
                }
            }
        }
    }
</style>
